<template>
  <div class="detail_reviews">
    <div>
      <h3>{{$t('DEFAULT.REVIEWS')}}</h3>
      <div class="rate">
        <el-rate :value="3.5" disabled :colors="rateArray"></el-rate>
        <span class="detail_reviews-count">683条评价</span>
      </div>
      <div class="detail_reviews-item">
        <p class="username">Amazon Customer</p>
        <el-rate :value="3.5" disabled :colors="rateArray" class="rate"></el-rate>
        <p class="title">Broke immediately but they made it right, excellent customer service.</p>
        <p class="subtitle">Excellent product, does exactly as advertised. Excellent build quality and great customer service. My first product was faulty but iVANKY replaced my product very quickly with one in perfect working order. Highly recommended</p>
        <div>
          <el-image class="image" v-for="item in 2" :key="item"></el-image>
        </div>
        <p class="date">2021/06/21</p>
      </div>
      <div class="pagination">
        <Pagination />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from './pagination.vue'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      rateArray: ['#6C7E59', '#6C7E59', '#DEE0DB'],
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail_reviews {
    background: #FFFFFF;
    width: 100%;
    width: 1200px;
    margin: 0 auto;
    padding-top: 56px;
    
    .rate {
      display: flex;
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 24px;
    }
  }
  .detail_reviews-count {
    margin-left: 16px;
    font-size: 18px;
    color: #191919;
  }
  .detail_reviews-item {
    padding: 32px 0;
    border-bottom: 1px solid #EAEAEA;

    .username {
      font-size: 14px;
      color: #191919;
    }

    .rate {
      margin: 9px 0 16px;
    }

    .title {
      font-size: 16px; color: #191919; font-weight: bold;
    }

    .subtitle {
      font-size: 14px; 
      color: #191919; 
      line-height: 22px; 
      margin: 8px 0 16px
    }

    .date {
      color: #D5D5D5;
      font-size: 12px;
    }

    .image {
      width: 84px;
      height: 84px;
      margin-right: 16px;
      margin-bottom: 16px;
    }
  }
  @media screen and (max-width: 768px) {
    .detail_reviews {
      width: 100%;
      padding: 20px;

      h3 {
        font-size: 20px;
      }
      .rate {
        margin: 16px 0;
        font-size: 14px;
      }
      .detail_reviews-count {
        font-size: 14px;
      }
      .detail_reviews-item {
        padding: 16px;
        background: #FAFAFA;

        .username {}

        .rate {
          margin: 5px 0 12px;
        }

        .title {
          font-size: 14px; 
        }

        .subtitle {
          font-size: 14px; 
          color: #191919; 
          line-height: 22px; 
          margin: 8px 0 16px
        }

        .date {
          color: #D5D5D5;
          font-size: 12px;
        }

        .image {
          width: 84px;
          height: 84px;
          margin-right: 16px;
          margin-bottom: 16px;
        }
      }
    }
  }
</style>